<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Internet Dreams</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" title="default" />
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="css/pro_dropline_ie.css" />
<![endif]-->

<!--  jquery core -->
<script src="js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>

<!--  checkbox styling script -->
<script src="js/jquery/ui.core.js" type="text/javascript"></script>
<script src="js/jquery/ui.checkbox.js" type="text/javascript"></script>
<script src="js/jquery/jquery.bind.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$('input').checkBox();
		$('#toggle-all').click(function() {
			$('#toggle-all').toggleClass('toggle-checked');
			$('#mainform input[type=checkbox]').checkBox('toggle');
			return false;
		});
	});
</script>


<![if !IE 7]>

<!--  styled select box script version 1 -->
<script src="js/jquery/jquery.selectbox-0.5.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.styledselect').selectbox({
			inputClass : "selectbox_styled"
		});
	});
</script>


<![endif]>


<!--  styled select box script version 2 -->
<script src="js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.styledselect_form_1').selectbox({
			inputClass : "styledselect_form_1"
		});
		$('.styledselect_form_2').selectbox({
			inputClass : "styledselect_form_2"
		});
	});
</script>

<!--  styled select box script version 3 -->
<script src="js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.styledselect_pages').selectbox({
			inputClass : "styledselect_pages"
		});
	});
</script>

<!--  styled file upload script -->
<script src="js/jquery/jquery.filestyle.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
	$(function() {
		$("input.file_1").filestyle({
			image : "images/forms/upload_file.gif",
			imageheight : 29,
			imagewidth : 78,
			width : 300
		});
	});
</script>

<!-- Custom jquery scripts -->
<script src="js/jquery/custom_jquery.js" type="text/javascript"></script>

<!-- Tooltips -->
<script src="js/jquery/jquery.tooltip.js" type="text/javascript"></script>
<script src="js/jquery/jquery.dimensions.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$('a.info-tooltip ').tooltip({
			track : true,
			delay : 0,
			fixPNG : true,
			showURL : false,
			showBody : " - ",
			top : -35,
			left : 5
		});
	});
</script>

<!--  date picker script -->
<link rel="stylesheet" href="css/datePicker.css" type="text/css" />
<script src="js/jquery/date.js" type="text/javascript"></script>
<script src="js/jquery/jquery.datePicker.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
	$(function() {

		// initialise the "Select date" link
		$('#date-pick').datePicker(
		// associate the link with a date picker
		{
			createButton : false,
			startDate : '01/01/2005',
			endDate : '31/12/2020'
		}).bind(
		// when the link is clicked display the date picker
		'click', function() {
			updateSelects($(this).dpGetSelected()[0]);
			$(this).dpDisplay();
			return false;
		}).bind(
		// when a date is selected update the SELECTs
		'dateSelected', function(e, selectedDate, $td, state) {
			updateSelects(selectedDate);
		}).bind('dpClosed', function(e, selected) {
			updateSelects(selected[0]);
		});

		var updateSelects = function(selectedDate) {
			var selectedDate = new Date(selectedDate);
			$('#d option[value=' + selectedDate.getDate() + ']').attr(
					'selected', 'selected');
			$('#m option[value=' + (selectedDate.getMonth() + 1) + ']').attr(
					'selected', 'selected');
			$('#y option[value=' + (selectedDate.getFullYear()) + ']').attr(
					'selected', 'selected');
		}
		// listen for when the selects are changed and update the picker
		$('#d, #m, #y').bind('change', function() {
			var d = new Date($('#y').val(), $('#m').val() - 1, $('#d').val());
			$('#date-pick').dpSetSelected(d.asString());
		});

		// default the position of the selects to today
		var today = new Date();
		updateSelects(today.getTime());

		// and update the datePicker to reflect it...
		$('#d').trigger('change');
	});
</script>

<!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
<script src="js/jquery/jquery.pngFix.pack.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(document).pngFix();
	});
</script>
</head>
<body>
<!-- Start: page-top-outer -->
<div id="page-top-outer">    

<!-- Start: page-top -->
<div id="page-top">

    <!-- start logo -->
    <div id="logo">
    <a href=""><img src="images/shared/logo.png" width="156" height="40" alt="" /></a>
    </div>
    <!-- end logo -->
    
    <!--  start top-search -->
    <div id="top-search">
        <table border="0" cellpadding="0" cellspacing="0">
        <tr>
        <td><input type="text" value="Search" onblur="if (this.value=='') { this.value='Search'; }" onfocus="if (this.value=='Search') { this.value=''; }" class="top-search-inp" /></td>
        <td>
        <select  class="styledselect">
            <option value=""> All</option>
            <option value=""> Products</option>
            <option value=""> Categories</option>
            <option value="">Clients</option>
            <option value="">News</option>
        </select> 
        </td>
        <td>
        <input type="image" src="images/shared/top_search_btn.gif"  />
        </td>
        </tr>
        </table>
    </div>
    <!--  end top-search -->
    <div class="clear"></div>

</div>
<!-- End: page-top -->

</div>
<!-- End: page-top-outer -->
    
<div class="clear">&nbsp;</div>
 
<!--  start nav-outer-repeat................................................................................................. START -->
<div class="nav-outer-repeat"> 
<!--  start nav-outer -->
<div class="nav-outer"> 

        <!-- start nav-right -->
        <div id="nav-right">
        
            <div class="nav-divider">&nbsp;</div>
<!--             <div class="showhide-account"><img src="images/shared/nav/nav_myaccount.gif" width="93" height="14" alt="" /></div> -->
<!--             <div class="nav-divider">&nbsp;</div> -->
            <a href="" id="logout"><img src="images/shared/nav/nav_logout.gif" width="64" height="14" alt="" /></a>
            <div class="clear">&nbsp;</div>
        
            <!--  start account-content --> 
            <div class="account-content">
            <div class="account-drop-inner">
                <a href="" id="acc-settings">Settings</a>
                <div class="clear">&nbsp;</div>
                <div class="acc-line">&nbsp;</div>
                <a href="" id="acc-details">Personal details </a>
                <div class="clear">&nbsp;</div>
                <div class="acc-line">&nbsp;</div>
                <a href="" id="acc-project">Project details</a>
                <div class="clear">&nbsp;</div>
                <div class="acc-line">&nbsp;</div>
                <a href="" id="acc-inbox">Inbox</a>
                <div class="clear">&nbsp;</div>
                <div class="acc-line">&nbsp;</div>
                <a href="" id="acc-stats">Statistics</a> 
            </div>
            </div>
            <!--  end account-content -->
        
        </div>
        <!-- end nav-right -->


        <!--  start nav -->
        <div class="nav">
        <div class="table">
        
        <ul class="current"><li><a href="homepage.jsp"><b>Home</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
        
        <div class="nav-divider">&nbsp;</div>
                            
        <ul class="select"><li><a href="Administrator?btAction=loadShoes"><b>Products</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub show">
            <ul class="sub">
                <li><a href="Administrator?btAction=loadShoes">View all products</a></li>
                <li><a href="add-shoes.jsp">Add product</a></li>
            </ul>
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
        
        <div class="nav-divider">&nbsp;</div>
        
        <ul class="select"><li><a href="Administrator?btAction=loadUsers"><b>Users</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
            <ul class="sub">
                <li><a href="Administrator?btAction=loadUsers">View all users</a></li>
                <li><a href="add-users.jsp">Add user</a></li>
            </ul>
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
        
        <div class="nav-divider">&nbsp;</div>
        
        <ul class="select"><li><a href="#nogo"><b>Contact</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
            <ul class="sub">
                <li><a href="AdministratorAction?btAction=ViewAllContact">View all contact</a></li>       
            </ul>
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
        
        <div class="nav-divider">&nbsp;</div>
        
        <ul class="select"><li><a href="#nogo"><b>Category</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
            <ul class="sub">
                <li><a href="AdministratorAction?btAction=ViewAllCategory">View all category</a></li>
                <li><a href="add-category.jsp">Add new category</a></li>
            </ul>
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
        
        <ul class="select"><li><a href="#nogo"><b>Order</b><!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
            <ul class="sub">
                <li><a href="OrderManagerAction?btAction=ViewAllOrderDetail">View all Order</a></li> 
            </ul>
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
        
        <div class="clear"></div>
        </div>
        <div class="clear"></div>
        </div>
        <!--  start nav -->

</div>
<div class="clear"></div>
<!--  start nav-outer -->
</div>
<!--  start nav-outer-repeat................................................... END -->
  <div class="clear"></div>

  <!-- start content-outer -->
  <div id="content-outer">
    <!-- start content -->
    <div id="content">


      <div id="page-heading">
        <h1>Add New User</h1>
      </div>


      <table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
        <tr>
          <th rowspan="3" class="sized"><img src="images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
          <th class="topleft"></th>
          <td id="tbl-border-top">&nbsp;</td>
          <th class="topright"></th>
          <th rowspan="3" class="sized"><img src="images/shared/side_shadowright.jpg" width="20" height="300"
            alt="" /></th>
        </tr>
        <tr>
          <td id="tbl-border-left"></td>
          <td>
            <!--  start content-table-inner -->
            <div id="content-table-inner">

              <table border="0" width="100%" cellpadding="0" cellspacing="0">
                <tr valign="top">
                  <td>
                    <!--  start step-holder -->
                    <div id="step-holder">
                      <div class="step-no">1</div>
                      <div class="step-dark-left">
                        <a href="">User details</a>
                      </div>
                      <div class="step-dark-right">&nbsp;</div>
                      <div class="clear"></div>
                    </div> <!--  end step-holder --> 
                         <!-- start id-form -->
                    <form action="">
                      <table border="0" cellpadding="0" cellspacing="0" id="id-form">
                        <tr>
                          <th valign="top">Email:</th>
                          <td><input type="text" class="inp-form" name="txtEmail"/></td>
                          <td></td>
                        </tr>
                        <tr>
                          <th valign="top">Password:</th>
                          <td><input type="text" class="inp-form" name="txtPassword"/></td>
                          <td></td>
                        </tr>
                        <tr>
                          <th valign="top">Sex:</th>
                          <td class="noheight">        
                            <select class="styledselect-sex">
                                <option value="1">Men</option>
                                <option value="0">Women</option>
                            </select>
                          </td>
                          <td></td>
                        </tr>

                        <tr>
                          <th valign="top">Date Carry:</th>
                          <td class="noheight">

                            <table border="0" cellpadding="0" cellspacing="0">
                              <tr valign="top">
                                <td><select id="d" class="styledselect-day">
                                    <option value="">dd</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                    <option value="13">13</option>
                                    <option value="14">14</option>
                                    <option value="15">15</option>
                                    <option value="16">16</option>
                                    <option value="17">17</option>
                                    <option value="18">18</option>
                                    <option value="19">19</option>
                                    <option value="20">20</option>
                                    <option value="21">21</option>
                                    <option value="22">22</option>
                                    <option value="23">23</option>
                                    <option value="24">24</option>
                                    <option value="25">25</option>
                                    <option value="26">26</option>
                                    <option value="27">27</option>
                                    <option value="28">28</option>
                                    <option value="29">29</option>
                                    <option value="30">30</option>
                                    <option value="31">31</option>
                                </select></td>
                                <td><select id="m" class="styledselect-month">
                                    <option value="">mmm</option>
                                    <option value="1">Jan</option>
                                    <option value="2">Feb</option>
                                    <option value="3">Mar</option>
                                    <option value="4">Apr</option>
                                    <option value="5">May</option>
                                    <option value="6">Jun</option>
                                    <option value="7">Jul</option>
                                    <option value="8">Aug</option>
                                    <option value="9">Sep</option>
                                    <option value="10">Oct</option>
                                    <option value="11">Nov</option>
                                    <option value="12">Dec</option>
                                </select></td>
                                <td><select id="y" class="styledselect-year">
                                    <option value="">yyyy</option>
                                    <option value="2010">2010</option>
                                    <option value="2011">2011</option>
                                    <option value="2012">2012</option>
                                    <option value="2013">2013</option>
                                    <option value="2014">2014</option>
                                    <option value="2015">2015</option>
                                </select></td>
                                <td><a href="" id="date-pick"><img src="images/forms/icon_calendar.jpg" alt="" /></a></td>
                              </tr>
                            </table>

                          </td>
                          <td></td>
                        </tr>

                        <tr>
                          <th valign="top">First name:</th>
                          <td><input type="text" class="inp-form" name="txtFirstName"/></td>
                          <td></td>
                        </tr>
                        <tr>
                          <th valign="top">Last name:</th>
                          <td><input type="text" class="inp-form" name="txtLastName"/></td>
                          <td></td>
                        </tr>

                        <tr>
                          <th valign="top">Is admin:</th>
                          <td>
                          <c:set var="checkAdmin" value="${user.admin}"/>
                            <input type="checkbox" name="ckIsAdmin"/>
                          </td>
                          <td></td>
                        </tr>
                        <tr>
                          <th valign="top">Address:</th>
                          <td><input type="text" class="inp-form" name="txtAddress"/></td>
                          <td></td>
                        </tr>
                        <tr>
                          <th valign="top">Phone Number:</th>
                          <td><input type="text" class="inp-form" name="txtPhoneNumber"/></td>
                          <td></td>
                        </tr>


                        <tr>
                          <th>&nbsp;</th>
                          <td valign="top"><input type="button" value="" class="form-submit" /> <input
                            type="reset" value="" class="form-reset" /></td>
                          <td></td>
                        </tr>
                      </table>
                    </form> <!-- end id-form  -->

                  </td>
                  <td>
                    

                  </td>
                </tr>
                <tr>
                  <td><img src="images/shared/blank.gif" width="695" height="1" alt="blank" /></td>
                  <td></td>
                </tr>
              </table>

              <div class="clear"></div>


            </div> <!--  end content-table-inner  -->
          </td>
          <td id="tbl-border-right"></td>
        </tr>
        <tr>
          <th class="sized bottomleft"></th>
          <td id="tbl-border-bottom">&nbsp;</td>
          <th class="sized bottomright"></th>
        </tr>
      </table>




      <div class="clear">&nbsp;</div>

    </div>
    <!--  end content -->
    <div class="clear">&nbsp;</div>
  </div>
  <!--  end content-outer -->



  <div class="clear">&nbsp;</div>

  <!-- start footer -->
  <div id="footer">
    <!--  start footer-left -->
    <div id="footer-left">
      Admin Skin &copy; Copyright Internet Dreams Ltd. <a href="">www.netdreams.co.uk</a>. All rights reserved.
    </div>
    <!--  end footer-left -->
    <div class="clear">&nbsp;</div>
  </div>
  <!-- end footer -->

</body>
</html>